<!--
 * @Author: wangming
 * @Date: 2020-09-17 10:51:45
 * @LastEditors: wangming
 * @LastEditTime: 2021-11-08 15:35:18
 * @Description: 字表明细
-->
<template>
  <div class="p12 sz tablebox">
    <div class="ks-row-middle-between mb24">
      <div class="ks-row-middle lh1">
        <div class="lineY"></div>
        <div class="g3 b f16">{{ config.__config.label }}</div>
      </div>
      <el-button type="primary" size="small">添加明细</el-button>
    </div>
    <el-table
      v-show="getColumn.length > 0"
      :data="list"
      border
      style="width: 100%"
      :header-cell-style="{
        backgroundColor: '#F5F7FA',
        color: '#333',
      }"
    >
      <el-table-column
        :prop="i.modelName"
        :label="i.__config.label"
        v-for="(i, index) in getColumn"
        :key="index"
      >
      </el-table-column>
    </el-table>
    <hlLayoutForm :config="config" isTableAdd></hlLayoutForm>
  </div>
</template>

<script>
import mixins from "../mixins.js";
import hlLayoutForm from "../hlLayoutForm.vue";
export default {
  mixins: [mixins],
  components: { hlLayoutForm },
  computed: {
    getColumn() {
      return this.transformColumn(this.config.children);
    },
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    transformColumn(list) {
      return list
        .map((i) => {
          if (!!i.children) {
            return this.transformColumn(i.children);
          } else {
            return i;
          }
        })
        .flat()
        .filter((i) => !!i.modelName);
    },
  },
};
</script>

<style lang="scss" scoped>
.tablebox {
  width: 100%;
}
.lineY {
  width: 2px;
  height: 18px;
  background: #1890ff;
  margin-right: 4px;
}
.tableinfo {
  padding-left: 12px;
  padding-right: 12px;
}
.dragbox {
  min-height: 160px;
}
.elboxe:hover {
  background-color: #fbfcfd;
  border: 1px dashed #d9d9d9 !important;
}
.active {
  background-color: #fbfcfd;
  border: 1px dashed #d9d9d9 !important;
}
</style>
